<script>
    function setGpoD(gpoId, name)
    {
        $("#group_d").val(gpoId);
        $("#spanNameD").html(name);
    }
    
    function setDate(dtId, name) {
        $("#dates_d").val(dtId);
        $("#spanNameF").html(name);
    }
    
    //function order(a, b) {
    //   alert(a);
    //    if (a.last_nom < b.last_nom)
    //     return -1;
    //  if (a.last_nom > b.last_nom)
    //    return 1;
    //  return 0;
    //}
    function setGen(gpoId, name)
    {
        $("#group_g").val(gpoId);
        $('#tableGeneral tbody').html('');
        $("#spanNameG").html(name);
        
        var data_ajax={
                        type: 'POST',
                        url: "<?php echo base_url(); ?>user/generalPosition",
                        data: { gpo: gpoId },
                        success: function( data ) {
                                                    if(data != 0)
                                                    {
                                                         //data.sort(order);
                                                         $.each(data, function(k,v){
                                                            fila = "<tr>";
                                                            var shortName = "";
                                                            var points = 0;
                                                            var Name = "";
                                                            var picture = "";
                                                            $.each(v, function(i,j){
                                                               switch (i) {
                                                                case 'realName':
                                                                    Name = j;
                                                                    break;
                                                                case 'points':
                                                                    points = j;
                                                                    break;
                                                                case 'name':
                                                                    shortName = j;
                                                                    break;
                                                                case 'picture':
                                                                    picture = j;
                                                                    break;
                                                               }
                                                            });
                                                            fila += '<td><img src="'+picture+'" height="30" width="30" class="pull-left img-circle"></td>';
                                                            if (Name != "" && Name != undefined) {
                                                                fila += "<td style=\"text-align: left\">"+Name+"</td>";
                                                            }else{
                                                                fila += "<td style=\"text-align: left\">"+shortName+"</td>";
                                                            }
                                                            fila += "<td>"+points+"</td></tr>";
                                                            
                                                            $('#tableGeneral tbody').append(fila);
                                                         });
                                                    }
                        },
                        error: function(){
                                //$('#table_team').css("display", "none");
                                //$('#error_msj').html('<strong>Ocurrio un error, intente nuevamente la acción.</strong>');
                            },
                        dataType: 'json'
                        };
			$.ajax(data_ajax);
                        
    }
    
    $("#addGroupBtn").click(function(){
	    //remove class active
	    $(".side-nav li").removeClass("active");
	    //add class active to selected element
	    //$(this).addClass('active');
	    $("#groupsOption").addClass('active');
	    $("#content_container").html('');
	    $("#content_container").html("");
	    var data_ajax={
		    type: 'POST',
		    url: "groups",
		    data: { },
		    success: function( data ) {
						$("#content_container").html(data);
					      },
		    error: function(data){$("#content_container").html(data);},
		    dataType: 'json'
		    };
	    $.ajax(data_ajax);
	});
</script>
<div class="row">
            <div class="col-md-6">
               
               <!--#region resultados -->
                <section class="widget">
                    <header>
                        <h4>
                            <i class="fa fa-bookmark-o"></i>
                            Tabla 
                            <small>
                                general
                            </small>
                        </h4>
                    </header>
                    <div class="body text-align-center" >
                        <?php
                        if(count($groups) > 0)
                        {
                            ?>
                        <div>
                            <table>
                                <tr>
                                    <td>
                                        <label for="article-category" class="control-label" style="padding-right: 15px; float: left;">Grupo:
                                    </td>
                                    <td>
                                        <div class="controls form-group" style="float: left;">
                                            <select id="group_g" class="input-large" data-style="btn-warning" class="selectpicker" style="display: none;">
                                                <?php
                                                    foreach($groups as $value)
                                                    {
                                                        echo '<option value="'.$value['id'].'">"'.$value['name'].'"</option>';
                                                    }
                                                ?>
                                            </select>
                                            <div class="btn-group bootstrap-select" style="padding-top: 15px;">
                                                <button class="btn dropdown-toggle clearfix btn-success" data-toggle="dropdown" id="group_g">
                                                    <span class="filter-option" id="spanNameG"><?= $groups[0]['name']; ?></span>&nbsp;<i class="fa fa-caret-down"></i>
                                                </button>
                                                    <ul class="dropdown-menu" role="menu" style="max-height: 323px; overflow-y: auto; min-height: 60px;">
                                                        <?php
                                                            foreach($groups as $value)
                                                            {
                                                                echo '<li rel="'.$value['id'].'" onClick="setGen('.$value['id'].',\''.$value['name'].'\');"><a tabindex="1" href="#" class="">'.$value['name'].'</a></li>';
                                                            }
                                                        ?>
                                                    </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        
                        <div>
                            <!-- Posiciones -->
                            <?php
                            if($positions != false)
                            {
                              
                            ?>
                            <table class="table table-striped" id="tableGeneral">
                              <thead>
                              <tr>
                                  <th></th><th style="text-align: center"><strong>Usuario</strong></th><th style="text-align: center"><strong>Puntos</strong></th>
                              </tr>
                              </thead>
                              <tbody>
                              <?php
                              $i = 0;
                              foreach($positions as $p)
                              {
                                if($i < 10)
                                  {
                                    echo '<tr>';
                                    echo '<td><img src="'.$p['picture'].'" height="30" width="30" class="pull-left img-circle"></td>';
                                    echo '<td style="text-align: left">';
                                    if($p['realName'] == "" || $p['realName'] == null)
                                        echo $p['name'];
                                        else
                                        echo $p['realName'];
                                    echo '</td>';
                                    echo '<td>'.$p['points'].'</td>';
                                    echo '</tr>';
                                    
                                    $i++;
                                  }
                                  else
                                  {
                                    break;
                                  }
                              }
                              ?>
                              </tbody>
                            </table>
                            
                            <?php
                            }
                            else
                            {
                              echo '
                                  <div class="alert alert-error">
                                      Ahún no estan disponibles las posiciones.
                                  </div>
                                  ';
                            }
                            ?>
                          <!-- -->  
                        </div>
                        <?php
                        }
                        else
                        {
                            echo "<div class=\"alert alert-error\">
                                    No tienes grupos asociados aun.
                                </div>
                                ";
                            echo '<button id="addGroupBtn" style="margin-left: 15px;" type="button" class="btn btn-success">
                                    Crear un grupo e invitar a mis amigos
                                  </button>';
                        }
                        ?>
                    </div>
                </section>
            </div>
            
            <?php
            if(count($groups) > 0 && count($dates) > 0)
            {
                ?>
            <div class="col-md-6">
               
               <!--#region resultados -->
                <section class="widget">
                    <header>
                        <h4>
                            <i class="fa fa-calendar-o"></i>
                            Tabla 
                            <small>
                                por fecha
                            </small>
                        </h4>
                    </header>
                    <div class="body text-align-center" >
                        
                        <div>
                            <table>
                                <tr>
                                    <td>
                                        <label for="article-category" class="control-label" style="padding-right: 15px; float: left;">Grupo:
                                    </td>
                                    <td>
                                        <div class="controls form-group" style="float: left;">
                                            <select id="group_d" class="input-large" data-style="btn-warning" class="selectpicker" style="display: none;">
                                                <?php
                                                    foreach($groups as $value)
                                                    {
                                                        echo '<option value="'.$value['id'].'">"'.$value['name'].'"</option>';
                                                    }
                                                ?>
                                            </select>
                                            <div class="btn-group bootstrap-select" style="padding-top: 15px;">
                                                <button class="btn dropdown-toggle clearfix btn-success" data-toggle="dropdown" id="group_d">
                                                    <span class="filter-option" id="spanNameD"><?= $groups[0]['name']; ?></span>&nbsp;<i class="fa fa-caret-down"></i>
                                                </button>
                                                    <ul class="dropdown-menu" role="menu" style="max-height: 323px; overflow-y: auto; min-height: 60px;">
                                                        <?php
                                                            foreach($groups as $value)
                                                            {
                                                                echo '<li rel="'.$value['id'].'" onClick="setGpoD('.$value['id'].',\''.$value['name'].'\');"><a tabindex="1" href="#" class="">'.$value['name'].'</a></li>';
                                                            }
                                                        ?>
                                                    </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        
                        <div>
                            <table>
                                <tr>
                                    <td>
                                        <label for="article-category" class="control-label" style="padding-right: 15px; float: left;">Fecha:
                                    </td>
                                    <td>
                                        <div class="controls form-group" style="float: left;">
                                            <select id="dates_d" class="input-large" data-style="btn-warning" class="selectpicker" style="display: none;">
                                                <?php
                                                    foreach($dates as $d)
                                                    {
                                                        echo '<option value="'.$d['dtId'].'">"'.$d['dtDescription'].'"</option>';
                                                    }
                                                ?>
                                            </select>
                                            <div class="btn-group bootstrap-select" style="padding-top: 15px;">
                                                <button class="btn dropdown-toggle clearfix btn-success" data-toggle="dropdown" id="dates_d">
                                                    <span class="filter-option" id="spanNameF"><?= $dates[0]['dtDescription']; ?></span>&nbsp;<i class="fa fa-caret-down"></i>
                                                </button>
                                                    <ul class="dropdown-menu" role="menu" style="max-height: 323px; overflow-y: auto; min-height: 60px;">
                                                        <?php
                                                            foreach($dates as $d)
                                                            {
                                                                echo '<li rel="'.$d['dtId'].'" onClick="setDate('.$d['dtId'].',\''.$d['dtDescription'].'\');"><a tabindex="1" href="#" class="">'.$d['dtDescription'].'</a></li>';
                                                            }
                                                        ?>
                                                    </ul>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-left: 50px; margin-top: -2px;">
                                        <button id="search_x_date" class="btn btn-inverse" type="button">Buscar</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        
                        <div>
                            <table class="table table-striped" id="tableByDate">
                                  <thead>
                                  <tr>
                                      <th></th><th style="text-align: center"><strong>Usuario</strong></th><th style="text-align: center"><strong>Puntos</strong></th>
                                  </tr>
                                  </thead>
                                  <tbody>
                                  </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
            <?php
            }
            ?>
</div>

</div>
<script>
    $(document).ready(function(){});
    
    $('#search_x_date').click(function(){
        $('#tableByDate tbody').html('');        
        var data_ajax={
                        type: 'POST',
                        url: "<?php echo base_url(); ?>user/result_for_date",
                        data: { gpo: $("#group_d").val(), dte: $("#dates_d").val()},
                        success: function( data ) {
                                                    if(data != 0)
                                                    {
                                                         $.each(data, function(k,v){
                                                            fila = "<tr>";
                                                            var shortName = "";
                                                            var points = 0;
                                                            var Name = "";
                                                            var picture = "";
                                                            $.each(v, function(i,j){
                                                               switch (i) {
                                                                case 'realName':
                                                                    Name = j;
                                                                    break;
                                                                case 'points':
                                                                    points = j;
                                                                    break;
                                                                case 'name':
                                                                    shortName = j;
                                                                    break;
                                                               case 'picture':
                                                                    picture = j;
                                                                    break;
                                                               }
                                                            });
                                                            fila += '<td><img src="'+picture+'" height="30" width="30" class="pull-left img-circle"></td>';
                                                            if (Name != "" && Name != undefined) {
                                                                fila += "<td style=\"text-align: left\">"+Name+"</td>";
                                                            }else{
                                                                fila += "<td style=\"text-align: left\">"+shortName+"</td>";
                                                            }
                                                            fila += "<td>"+points+"</td></tr>";
                                                            
                                                            $('#tableByDate tbody').append(fila);
                                                         });
                                                    }
                        },
                        error: function(){
                                //$('#table_team').css("display", "none");
                                //$('#error_msj').html('<strong>Ocurrio un error, intente nuevamente la acción.</strong>');
                            },
                        dataType: 'json'
                        };
	$.ajax(data_ajax);
        
    });
</script>